<template>
  <div class="root">
    <el-card>
      <el-row type="flex" justify="space-bwteen">
        <el-col>
          <el-button type="primary" size="small" @click="showDialog = true">添加页面</el-button>
        </el-col>
        <el-col :span="10">
          <el-input v-model.trim="contains" placeholder="请输入关键字" class="input-with-select" style="width:500px" @keydown.enter.native="query">
            <el-button slot="append" @click="query">
              筛选
            </el-button>
          </el-input>
        </el-col>
      </el-row>
      <transition name="fade-transform" mode="out-in">
        <el-row v-show="isshow" style="margin-top:20px">

          <el-table

            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column
              prop="title"
              label="标题"
              width="300"
            />
            <el-table-column
              label="内容"
            >
              <template #default="{row}">
                <div class="content ql-editor " v-html="row.content" />
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="300"
            >
              <template #default="{row}">
                <el-button type="primary" @click="editPage(row.id)">编辑</el-button>
                <el-button type="danger" @click="delPage(row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-row>
      </transition>
      <el-row
        type="flex"
        justify="center"
        style="margin-top:15px;"
      >
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageConfig._limit"
          :current-page="currentPage"
          @current-change="currentChange"
        />
      </el-row>
      <addPage ref="addPage" :show-dialog.sync="showDialog" @initPages="getPageList" @initpageLength="addPage" />
    </el-card>
  </div>
</template>

<script>
import { getPages, delPages } from '@/api/page'
import addPage from './components/addPage.vue'
export default {
  components: { addPage },
  data() {
    return {
      isshow: true,
      tableData: [],
      pageConfig: {
        _limit: 3,
        _start: 0,
        title_contains: ''
      },
      total: 0,
      showDialog: false, // 弹出框显示与隐藏
      contains: '', // 模糊查询用的
      currentPage: 1 // 当前页码
    }
  },
  async created() {
    // 获取初始护具
    this.getPageList()
  },
  methods: {
    // 获取数据
    async getPageList() {
      // 获取当前配置的数据
      const res = await getPages(this.pageConfig)
      this.tableData = res.data

      // 获取数据的时候根据当前的模糊查询字段获取length
      const { data } = await getPages({ title_contains: this.pageConfig.title_contains })
      this.total = data.length
    },
    // 点击页码效果
    currentChange(page) {
      this.isshow = false
      setTimeout(() => {
        this.isshow = true
      }, 100)
      this.currentPage = page
      this.pageConfig._start = (page - 1) * this.pageConfig._limit
      this.getPageList()
    },
    // 删除接口
    async delPage(id) {
      await this.$confirm('是否删除')
      await delPages(id)
      // 判定页面数据
      if (this.tableData.length === 1 && this.pageConfig._start >= 3) {
        this.pageConfig._start -= 3
        this.currentPage--
      }
      // 删除完了 继续发送请求获取总数 显示页码?
      this.$message.success('删除成功')
      this.getPageList()
    },
    // 模糊查询
    async query() {
      this.pageConfig.title_contains = this.contains
      // 并跳到第一页 显示三条
      this.currentPage = 1
      this.pageConfig._start = 0
      this.getPageList()
    },
    // 编辑
    async editPage(id) {
      await this.$refs.addPage.getPage(id)
      this.showDialog = true
    },
    //  新增好后获取当前条件下的数据length 和数据
    async addPage() {
      // 添加后跳到最后一页  bug:问题在于如果在模糊查询中 添加的数据没有关系也会跳到最后一页
      // this.currentPage = Math.ceil(this.total / this.pageConfig._limit)
      // this.pageConfig._start = (Math.ceil(this.total / this.pageConfig._limit) - 1) * this.pageConfig._limit
      // const res = await getPages(this.pageConfig)
      // this.tableData = res.data
      this.getPageList()
    }
  }
}
</script>

<style lang="scss" scoped>
 /* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.1s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-80px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(50px);
}
.root{
  padding: 0 20px;
  margin-top: 20px;
 ::v-deep .el-card__body{
    height: calc(100vh - 80px);
  }

}
.content{
  overflow: auto;
  max-height: 150px;
}
.ql-editor{
  min-height: 0;
}
</style>
